<template>
  <div class="box">
    <div class="tip_box" v-for="(val, index) in introduce" :key="index">
      <div class="img_box">
        <img
          :src="val.coverImgUrl"
          alt=""
        />
      </div>

      <div class="introduce">
        <ul >
          <li class="li1 li clear">
            <button>歌单</button>
            <h2>{{val.name}}</h2>
          </li>
          <li class="li2 li clear">
            <img :src="val.creator.avatarUrl" alt="" />
            <a href="#">{{val.creator.nickname}}</a>
            <p class="time">2022-4-22</p>
          </li>
          <li class="li3 li clear">
            <div class="play">
              <i class="el-icon-caret-right"></i>
              <p>播放全部</p>
              <div class="xian"></div>
              <i class="el-icon-plus"></i>
            </div>
            <div class="add but">
              <i class="el-icon-folder-add"></i>
              <p>收藏({{(val.subscribedCount/10000).toFixed(1)}})万</p>
            </div>
            <div class="share but">
              <i class="el-icon-share"></i>
              <p>分享({{val.shareCount}})</p>
            </div>
            <div class="download but">
              <i class="el-icon-download"></i>
              <p>全部下载</p>
            </div>
          </li>
          <li class="li1 li p clear">
            <p>标签</p>
            <a href="#" v-for="(item, index) in val.tags" :key="index">{{item}}<span>/</span></a>
          </li>
          <li class="li1 li p clear">
            <p>歌曲:</p>
            <p class="music_count">{{val.trackCount}}</p>
            <p class="play_count">播放: {{((val.playCount)/10000).toFixed(1)}}万</p>
          </li>
          <li class="li1 li p description clear">

            <div class="p2"><span>简介: </span>{{val.description}}</div>
          </li>
        </ul>
      </div>
    </div>

    <div class="loading" v-show="loading">
      <i class="el-icon-loading"></i>
    </div>
    <div class="list_box" v-show="!loading">
      <div class="navbar">
        <ul>
          <li :class="style == 0 ? 'nav_li' : ''" @click="handle(0)">
            <p>歌曲列表</p>
            <span></span>
          </li>
          <li :class="style == 1 ? 'nav_li' : ''" @click="handle(1)">
            <p>评论</p>
            <span></span>
          </li>
          <li :class="style == 2 ? 'nav_li' : ''" @click="handle(2)">
            <p>收藏者</p>
            <span></span>
          </li>
        </ul>
      </div>

      <div :class="style == 0 ? 'block' : 'none'" id="list1">
        <div class="list1_top"></div>

        <table class="list1_music">
          <tr class="h1">
            <th width="10%">操作</th>
            <th width="35%">标题</th>
            <th width="15%">歌手</th>
            <th width="15%">专辑</th>
            <th width="5%">时间</th>
          </tr>

          <tr
            v-for="(val, index) in songs"
            :key="index"
            :class="(index + 1) % 2 == 0 ? 't1' : 't2'"
            @click="play(val.id,songs)"
          >
            <td>
              <p>0{{ index + 1 }}</p>
            </td>
            <td>{{ val.name }}</td>
            <td>{{ val.ar[0].name }}</td>
            <td>{{ val.al.name }}</td>
            <td>
              {{
                "0" +
                Math.floor(val.dt / 1000 / 60) +
                ":" +
                Math.floor(
                  60 * (val.dt / 1000 / 60 - Math.floor(val.dt / 1000 / 60))
                )
              }}
            </td>
          </tr>
        </table>
        <div class="block1"></div>
      </div>

      <div :class="style == 1 ? 'block' : 'none'" id="list2">2</div>

      <div :class="style == 2 ? 'block' : 'none'" id="list3">3</div>
    </div>
  </div>
</template>

<script>
import api from '../../assets/api/request'
export default {
  data () {
    return {
      style: 0,
      songs: [],
      loading: true,
      introduce: []
    }
  },
  mounted () {
    // console.log(this.$route.query.id);
    const musicdetails = localStorage.getItem('musicdetails')
     const id = this.$route.query.id
      Promise.all([
        this.getapi.getSongmenu(id),
        this.getapi.getMusicMuenDetails(id)
      ]).then((res) => {
        this.songs = res[0].songs
        this.loading = false
        localStorage.setItem('musicdetails', JSON.stringify(res[0].songs))
        this.introduce.push(res[1].playlist)
        console.log(res[1].playlist, 123)
      })
    // if (musicdetails != undefined) {
     
    // } else {
    //   this.songs = JSON.parse(localStorage.getItem('musicdetails'))
    //   console.log(this.songs)
    // }
  },
  methods: {
    handle (e) {
      console.log(e)
      this.style = e
    },
    play (e, val) {
      this.$store.commit('musiclist/addlist', val)
      this.utils.playSong(e, val).then((res) => {
        this.$bus.$emit('play', res[0], res[1])
      })
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.tip_box {
  width: 97%;
  height: 200px;
  margin: 15px auto;
  margin-left: 25px;
  display: flex;
}
.tip_box .img_box {
  width: 20%;
  height: 200px;
  background-color: antiquewhite;
}
.img_box img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.li {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.li1 {
  display: flex;
  margin-left: 10px;
}
.li1 button {
  width: 50px;
  height: 25px;
  border: 1px solid #ec4141;
  color: #ec4141;
  background-color: white;
  border-radius: 5px;
}
.li1 h2 {
  margin-left: 10px;
}

.li2 {
  display: flex;
  align-items: center;
}
.li2 img {
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 10px;
  border-radius: 5px;
}
.li2 a {
  margin: 0 10px;
}
.description .p1{
  width: 50px;
}
.description .p2 {
  width: 500px;
  z-index: 99;
  background-color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.li3 > div {
  width: 130px;
  height: 30px;
  margin-left: 10px;
  border-radius: 20px;
  border: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
}
.li3 .play {
  background-color: #ec4141;
  color: white;
}
.play i {
  font-size: 1.5rem;
  margin-left: 5px;
}
.play p {
  margin-left: 5px;
}
.but {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8d8d8;
}
.but i {
  font-size: 1.45rem;
}
.introduce .p {
  margin-top: 14px;
}
.introduce .p p {
  margin-right: 10px;
  color: #676767;
}
</style>

<style scoped>
.list_box {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.list_box .navbar {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;

  margin: 0 auto;
}

.list_box .navbar ul {
  display: flex;
  align-items: center;
}
.navbar li {
  width: auto;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navbar .nav_li span {
  width: 80%;
  height: 4px;
  display: block;
  background-color: #bf3e3e;
  position: relative;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}
.navbar .nav_li span {
  background-color: #ec4141;
}
.navbar .nav_li p {
  font-size: 1.25rem;
  font-weight: 700;
}
#menu_list {
  width: 100%;
  height: 300px;
  background-color: #d8d8d8;
}
.block {
  float: left;
  display: block;
}
.none {
  display: none;
}
</style>

<style scoped>
#list1 {
  width: 95%;
  height: 600px;
  background-color: white;
  margin: 0 auto;
}
.list1_music {
  width: 100%;
  height: 75px;
  border: 0;
}
.list1_music .h1 th {
  text-align: left;
}
.list1_music td,
th {
  height: 35px;
  border: 0;
}

.list1_music tr:hover {
  background-color: #f0f1f2;
}

.list1_music .t2 {
  background-color: #f9f9f9;
}
</style>
